Create image component

1 files changed, 6 insertions, 3 deletions

diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index 5e0c8853..b8d29d02 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -5,13 +5,12 @@ import Header from "../../../components/Header";
 import apiOdoo from "../../../helpers/apiOdoo";
 import { createSlug, getIdFromSlug } from "../../../helpers/slug";
 import currencyFormat from "../../../helpers/currencyFormat";
-import { LazyLoadImage } from "react-lazy-load-image-component";
-import "react-lazy-load-image-component/src/effects/blur.css";
 import ProductSlider from "../../../components/product/ProductSlider";
 import Layout from "../../../components/Layout";
 import { createOrUpdateItemCart } from "../../../helpers/cart";
 import toast from "react-hot-toast";
 import Footer from "../../../components/Footer";
+import Image from "../../../components/Image";
 
 export async function getServerSideProps( context ) {
   const { slug } = context.query;
@@ -103,7 +102,11 @@ export default function ProductDetail({ product }) {
     <>
       <Header title={`${product.name} - Indoteknik`}/>
       <Layout>
-        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray_r-6 w-full h-[300px] object-contain object-center bg-white" />
+        <Image 
+          src={product.image}
+          alt={product.name}
+          className="border-b border-gray_r-6 w-full h-[300px] object-contain object-center bg-white"
+        />
         <div className="p-4 pb-10">
           <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
             {product.manufacture.name ?? '-'}